<template>
    <div class="artist">
      <ul>
        <router-link tag="li" :to="{name:'artDatail',params:{'ting_uid':art.ting_uid,'avatar_s500':art.avatar_s500,name:art.name}}" v-for="(art,index) in artistData" :key="index">
          <div class="pic">
            <img :src="art.avatar_s500" alt="">
          </div>
          <div class="info">
             {{art.name}}
          </div>
        </router-link>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "artists",
        data(){
            return{
              artistArr:['2517','7994','1091','45561','2507','245815','1077','1204','1117','82366'],
              artistData:[]
            }
        },
       created(){
          this.artistArr.forEach(item=>{
             const url = this.host + '/v1/restserver/ting?method=baidu.ting.artist.getInfo&tinguid=' + item;
             this.$axios.get(url).then(res=>{
               this.artistData.push({
                 avatar_s500:res.data.avatar_s500,
                 name:res.data.name,
                 ting_uid:res.data.ting_uid
               })
             }).catch(err=>{

             })
          })

       }

    }
</script>

<style scoped lang="less">
 .artist{
   padding: 20px 17px 10px;
   ul{

     li{
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f3f3f3;
        padding: 8px 0;
       .pic{
         flex: 0 0 50px;
         width: 50px;
         img{
           border-radius: 40px;
           width:100%;
         }
       }
       .info{
         flex: 1;
         font-size: 14px;
         color: #666;
         margin-left: 20px;
       }
     }

   }
 }
</style>
